<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tabbar半凹凸选中</title>
</head>
<link rel="stylesheet" href="../common.css">
<link rel="stylesheet" href="./font.css">
<style>
    /*最外层父元素的颜色要与边框色值一致 */

    :root {
        --color: #222;
        --bg: orange;
        --w:100px;
        --t:450px;
        --c:70px;
    }


    .container {
        background: #fff;
        border-radius: 10px;
        position: relative;
        height: 70px;
        width: var(--t);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: var(--w);
        cursor: pointer;
    }

    .item span {
        font-size: 20px;
        font-weight: bold;
        color: var(--color);
        transition: 0.5s all;
        position: relative;
        z-index: 9;
    }

    .item p {
        position: absolute;
        font-size: 15px;
        font-weight: bold;
        color: var(--color);
        transition: 0.5s all;
        opacity: 0;
        transform: translateY(20px);
    }

    .item:hover span,
    .item.active span {
        transform: translateY(-35px);
    }

    .item:hover p,
    .item.active p {
        opacity: 1;
        transform: translateY(12px);
    }

    .active-box {
        position: absolute;
        width: var(--c);
        height:var(--c);
        background: var(--bg);
        /* left: 40px; */
        --left-pad:calc(var(--t) - (4 * var(--w)));
        left: calc((var( --left-pad) / 2) + (var(--w) / 2) - (var(--c) / 2));
        top: -50%;
        border-radius: 50%;
        border: 4px solid var(--color);
        transition: 0.5s all;
    }

    .active-box::before,
    .active-box::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 20px;
        height: 20px;
        background: transparent;
    }

    .active-box::before {
        left: -20px;
        border-radius: 0 20px 0 0;
        box-shadow: 0 -10px 0 0 var(--color);

    }

    .active-box::after {
        right: -20px;
        border-radius: 20px 0 0 0;
        box-shadow: 0 -10px 0 0 var(--color);
    }

    .item.active~.active-box {
        transform: translateX(calc(var(--w) * var(--n)));
    }
</style>

<body>
    <div class="container">
        <div class="item active" style="--n:0">
            <span class="iconfont">&#xe611;</span>
            <p>三明治</p>
        </div>
        <div class="item" style="--n:1">
            <span class="iconfont">&#xe65e;</span>
            <p>汉堡</p>
        </div>
        <div class="item" style="--n:2">
            <span class="iconfont">&#xe698;</span>
            <p>沙冰</p>
        </div>
        <div class="item" style="--n:3">
            <span class="iconfont">&#xe65c;</span>
            <p>可乐</p>
        </div>
        <div class="active-box" style="--n:0"></div>
    </div>
</body>
<script>
    const list = document.querySelectorAll('.item');
    let node = document.getElementsByClassName('active-box')[0];
    // console.log(list)
    function clickActive() {
        console.log(this)
        list.forEach(item => {
            item.classList.remove('active');
            this.classList.add('active');
        })
        console.log(this.style.getPropertyValue('--n').trim())
        console.log(node)
        node.style.setProperty('--n', this.style.getPropertyValue('--n').trim());
    }
    list.forEach((item, index) => {
        item.addEventListener('click', clickActive);

    })



    // 设置变量
    document.body.style.setProperty('--primary', '#7F583F');
    // 读取变量
    document.body.style.getPropertyValue('--primary').trim();
    // '#7F583F'
    // 删除变量
    document.body.style.removeProperty('--primary');


    // const docStyle = document.documentElement.style;
    // document.addEventListener('mousemove', (e) => {
    //     docStyle.setProperty('--mouse-x', e.clientX);
    //     docStyle.setProperty('--mouse-y', e.clientY);
    // });

    // --foo: if(x > 5) this.width = 10;--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取。
    // CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。

</script>

</html>